<template>
	<view>
		<u-popup :show="show" @open="open" mode="center" round='12rpx'>
			<view class="popbox">
				<image src="/static/sing/topbg.png" class="popbox__topbg" mode=""></image>
				<view class="popbox__yq">
					已连续签到1天
				</view>
				<view class="popbox__conlist">
					<view class="popbox__conlist__item" :class='index==6?"item1":""' v-for="(item,index) in list" :key="index">
						<view class="popbox__conlist__item__box">
							<image v-if="item.isq" src="/static/sing/yq.png" class="popbox__conlist__item__icon" mode=""></image>
							<image v-else src="/static/sing/wq.png" class="popbox__conlist__item__icon" mode=""></image>
						</view>
						<view class="popbox__conlist__item__num">
							金币+{{item.num}}
						</view>
					</view>
				</view>
				<view class="popbox__footer">
					<u-button :loading='loading' shape='circle' @click="submit" loadingText='领取中' text="领取奖励" color="#51CAEF" class="custom-style"></u-button>
					<view class="tips">
						1.本签到为累计签到，用户若中途中断签到，签到记录将自动重新开始。</br>
						2.签到周期为七天。</br>
						3.签到获取书币红包有效期7天
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				loading:false,
				list:[
					{num:30,isq:true},
					{num:35,isq:false},
					{num:40,isq:false},
					{num:45,isq:false},
					{num:50,isq:false},
					{num:60,isq:false},	
					{num:70,isq:false},	
				]
			};
		},
		methods: {
			open() {

			},
			submit(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.popbox {
		width: 622rpx;
		// height: 936rpx;
		background: linear-gradient(136deg, #F4F8FF 0%, #DAE7FF 100%);
		border-radius: 12rpx 12rpx 12rpx 12rpx;

		&__topbg {
			width: 269rpx;
			height: 50rpx;
			margin-left: 176rpx;
			margin-top: -8rpx;
		}

		&__yq {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #4782FF;
			line-height: 40rpx;
			text-align: center;
			margin-top: 12rpx;
		}

		&__conlist {
			padding: 24rpx 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			&__item {
				width: 114rpx;
				height: 144rpx;
				background: #51CAEF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				position: relative;
				overflow: hidden;
				margin-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				&:after {
					width: 160%;
					height: 144rpx;
					position: absolute;
					left: -30%;
					top: -38rpx;
					z-index: -1;
					content: "";
					border-radius: 0 0 50% 50%;
					background: #fff;
					z-index: 1;
				}
				&__box{
					width: 108rpx;
					height: 108rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&__icon{
					width: 64rpx;
					height: 64rpx;
					position: relative;
					z-index: 3;
				}
				&__num{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
			.item1{
				width: 252rpx;
			}
		}
		&__footer{
			padding: 24rpx 48rpx 48rpx;
		}
	}
	.tips{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 46rpx;
		margin-top: 48rpx;
	}
</style>